---
title: Image Gallery
description: Usage instructions for the Image Gallery component
---

<PageDescription>

A small scale example of the Image Gallery from the
[IBM Design Language Gallery](https://www.ibm.com/design/language/gallery).

</PageDescription>

## Example

Click on an image to open the gallery.

<ImageGallery>

<ImageGalleryImage alt="IBM Design" title="IBM Design" col={4}>

![IBM Design](/images/IBM_Design_landing.jpg)

</ImageGalleryImage>

<ImageGalleryImage  alt="IBM Cloud Logo" title="IBM Cloud" col={4}>

![IBM Cloud Logo](/images/IBM_Cloud_Logo.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Developers" title="IBM Cloud Developers" col={4}>

![IBM Cloud Developers](/images/IBM_Cloud_Developers.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Data Center" title="IBM Cloud Data Center" col={8}>

![IBM Cloud Data Center](/images/IBM_Cloud_Data_Center.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Interconnect" title="IBM Cloud Interconnect" col={4}>

![IBM Cloud Interconnect](/images/IBM_Cloud_Interconnect.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Notebook" title="IBM Cloud Notebook" col={4}>

![IBM Cloud Notebook](/images/IBM_Cloud_Notebook.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={8}>

<GifPlayer color='dark'>

![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif)
![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.jpg)

</GifPlayer>

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Pictograms" title="IBM Cloud Pictograms" col={4}>

<GifPlayer>

![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif)
![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.jpg)

</GifPlayer>

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Server" title="IBM Cloud Server" col={4}>

![IBM Cloud Server](/images/IBM_Cloud_Server.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={4}>

<Video src="/videos/hero-video.mp4" poster="/images/poster.jpg">
  <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
</Video>

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Think" title="IBM Cloud Think" col={4}>

![IBM Cloud Think](/images/IBM_Cloud_Think_Keynote.jpg)

</ImageGalleryImage>

</ImageGallery>

## Code

You can use the ImageGallery component in markdown by nesting your images inside
the ImageGallery component and using the ImageGalleryImage component to define
the image’s location, title, alt tag, and the columns the image on the page will
span at the medium and large breakpoints. There is no gallery view for mobile so
the small breakpoint is not defined.

Here’s an example of how to use the ImageGallery and the ImageGalleryImage
components in markdown.

```mdx path=/components/ImageGallery.mdx src=https://gatsby-theme-carbon.now.sh
<ImageGallery>
<ImageGalleryImage alt="IBM Design" title="IBM Design" col={4}>

![IBM Design](/images/IBM_Design_landing.jpg)

</ImageGalleryImage>

<ImageGalleryImage  alt="IBM Cloud Logo" title="IBM Cloud" col={4}>

![IBM Cloud Logo](/images/IBM_Cloud_Logo.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Developers" title="IBM Cloud Developers" col={4}>

![IBM Cloud Developers](/images/IBM_Cloud_Developers.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Data Center" title="IBM Cloud Data Center" col={8}>

![IBM Cloud Data Center](/images/IBM_Cloud_Data_Center.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Interconnect" title="IBM Cloud Interconnect" col={4}>

![IBM Cloud Interconnect](/images/IBM_Cloud_Interconnect.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Notebook" title="IBM Cloud Notebook" col={4}>

![IBM Cloud Notebook](/images/IBM_Cloud_Notebook.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={8}>

![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Pictograms" title="IBM Cloud Pictograms" col={4}>

![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Server" title="IBM Cloud Server" col={4}>

![IBM Cloud Server](/images/IBM_Cloud_Server.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Think" title="IBM Cloud Think" col={4}>

![IBM Cloud Think](/images/IBM_Cloud_Think_Keynote.jpg)

</ImageGalleryImage>
</ImageGallery>
```
